<template>
	<view class="wui-sliderValidate">
		<view v-if="imgSrc" class="verification-wrap" :style="[imgWidthComputed, imgHeightComputed]">
			<image class="verification-img" :src="imgSrc"></image>

			<view class="slider-img" :style="[sliderWidthComputed, { top: sliderBlockTop + 'px', left: sliderImgXX + 'px' }]">
				<image :src="imgSrc" :style="[imgWidthComputed, imgHeightComputed, { top: '-' + sliderBlockTop + 'px', left: '-' + sliderBlockLeft + 'px' }]"></image>
			</view>
			<view class="slider-shadow" :style="[sliderWidthComputed, { top: sliderBlockTop + 'px', left: sliderBlockLeft + 'px' }]"></view>
		</view>
		<movable-area animation class="slider-wrap" :style="[imgWidthComputed, sliderWidthComputed, dragBackgroundComputed, sliderImgXXComputed]" @touchend="endTouchMove">
			<text class="slider-wrap-text">{{sliderText}}</text>
			<view class="slider-wrap-success" v-if="!imgSrc && sliderImgXX + sliderWidthPxComputed == imgWidthPxComputed">验证成功</view>
			<movable-view class="slider" :style="[sliderWidthComputed, sliderBackgroundComputed]" :x="sliderImgX" direction="horizontal" @change="onChange">
				<text class="iconfont icon-wui-double-right"></text>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
export default {
	name: 'w-sliderValidate',
	props: {
		imgSrc: {
			type: String
		},
		// 滑块大小
		sliderWidth: {
			type: [String, Number],
			default: '100'
		},
		// 滑块颜色
		sliderBackground: {
			type: String,
			default: '#007CFF'
		},
		// 拖动的背景色
		dragBackground: {
			type: String,
			default: '#60a8ff'
		},
		imgWidth: {
			type: [String, Number],
			default: '700'
		},
		imgHeight: {
			type: [String, Number],
			default: '400'
		},
		sliderText:{
			type: String,
			default: '拖动滑块完成验证'
		}
	},
	data() {
		return {
			// X轴滑块的left值
			sliderImgX: 0,
			sliderImgXX: 0,
			sliderBlockLeft: 0,
			sliderBlockTop: 0
		};
	},
	mounted() {
		this.init();
	},
	computed: {
		imgWidthPxComputed() {
			return uni.upx2px(this.imgWidth);
		},
		sliderWidthPxComputed() {
			return uni.upx2px(this.sliderWidth);
		},
		imgWidthComputed() {
			return {
				'--img-width': uni.upx2px(this.imgWidth) + 'px'
			};
		},
		imgHeightComputed() {
			return {
				'--img-height': uni.upx2px(this.imgHeight) + 'px'
			};
		},
		sliderWidthComputed() {
			return {
				'--slider-width': uni.upx2px(this.sliderWidth) + 'px'
			};
		},
		sliderBackgroundComputed() {
			return {
				'--slider-background': this.sliderBackground
			};
		},
		sliderImgXXComputed() {
			return {
				'--slider-background-width': this.sliderImgXX + uni.upx2px(this.sliderWidth) + 'px'
			};
		},

		dragBackgroundComputed() {
			return {
				'--drag-background': this.dragBackground
			};
		}
	},
	methods: {
		// 初始化
		init() {
			this.sliderBlockLeft = this.random(uni.upx2px(this.sliderWidth), uni.upx2px(this.imgWidth) - uni.upx2px(this.sliderWidth));
			this.sliderBlockTop = this.random(0, uni.upx2px(this.imgHeight) - uni.upx2px(this.sliderWidth));
			this.reset();
		},
		// 随机区间
		random(m, n) {
			return Math.floor(Math.random() * (n - m)) + m;
		},
		onChange(e) {
			this.sliderImgXX = e.detail.x;
		},
		reset() {
			this.sliderImgX = 1;
			this.sliderImgXX = 1;
			setTimeout(() => {
				this.sliderImgXX = 0;
				this.sliderImgX = 0;
			}, 300);
		},
		endTouchMove(e) {
			if (this.imgSrc) {
				if (Math.abs(this.sliderImgXX - this.sliderBlockLeft) <= 3) {
					this.$emit('success');
				} else {
					this.reset();
				}
			} else {
				if (this.sliderImgXX + uni.upx2px(this.sliderWidth) == uni.upx2px(this.imgWidth)) {
					this.$emit('success');
				} else {
					this.reset();
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@keyframes shine {
	0% {
		left: -100%;
	}

	50% {
		left: 0;
	}

	100% {
		left: 100%;
	}
}
.wui-sliderValidate {
	overflow: hidden;
	.verification-wrap {
		position: relative;
		width: var(--img-width);
		height: var(--img-height);
		margin-bottom: 30rpx;
		.verification-img {
			width: 100%;
			height: 100%;
		}

		.slider-img,
		.slider-shadow {
			position: absolute;
			width: var(--slider-width);
			height: var(--slider-width);
		}
		.slider-img {
			top: 0;
			left: 0;
			z-index: 100;
			box-shadow: 0 0 20rpx 2rpx rgba(0, 0, 0, 0.5);
			overflow: hidden;
			image {
				display: block;
				position: absolute;
				width: var(--img-width);
				height: var(--img-height);
				left: 0;
			}
		}

		.slider-shadow {
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);
		}
	}

	.slider-wrap {
		width: var(--img-width);
		height: var(--slider-width);
		background-color: #eee;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		.slider-wrap-text {
			color: #969696;
			font-size: 30rpx;
		}
		.slider-wrap-success {
			position: absolute;
			z-index: 3;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
		}
		.slider {
			position: absolute;
			z-index: 10;
			width: var(--slider-width);
			height: var(--slider-width);
			background-color: var(--slider-background);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			.iconfont {
				font-size: 46rpx;
			}
		}
	}

	// --slider-background-width
	.slider-wrap:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: var(--slider-background-width);
		height: 100%;
		background-color: var(--drag-background);
		z-index: 2;
	}
	.slider-wrap:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
		animation: shine 1.5s linear infinite;
		z-index: 1;
	}
}
</style>
